<template>
    <div class="container">
      <el-form :inline="true" size="small" ref="queryForm" class="demo-form-inline">
        <el-form-item label="文本类型：">
          <el-select size="small" v-model="mode" @change="changeMode" style="width:160px;">
            <el-option v-for="item in modes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item style="float: right">
            <el-button type="primary" icon="el-icon-thumb" size="small" @click="getData()">获取数据</el-button>
         </el-form-item>
      </el-form>
      <div class="editor-box">
        <textarea ref="cmEditor" class="codeSql" v-model="code"></textarea>
      </div>
    </div>
</template>
<script>
import CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'// 核心样式
import 'codemirror/theme/rubyblue.css'// 主题: rubyblue
import 'codemirror/theme/idea.css'// 主题: idea 
//mode
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/r/r.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/swift/swift.js'
import 'codemirror/mode/vue/vue.js'
//工具包
import 'codemirror/addon/selection/active-line'//光标选中行高亮
import 'codemirror/addon/scroll/simplescrollbars.css'//滚动条-样式
import 'codemirror/addon/scroll/simplescrollbars'//滚动条
import 'codemirror/addon/edit/matchbrackets'//括号匹配
// keyMap
import 'codemirror/keymap/sublime.js'
import 'codemirror/keymap/emacs.js'
import 'codemirror/keymap/vim.js'
// hint
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/javascript-hint.js'
export default {
  name: 'codemirrorEditor',
  data() {
    return {
      mode: 'text/x-java',
      modes: [
        { value: 'text/css', label: 'CSS' }, 
        { value: 'text/javascript', label: 'Javascript' }, 
        { value: 'text/html', label: 'XML/HTML'}, 
        { value: 'text/x-java', label: 'Java'}, 
        { value: 'text/x-objectivec', label: 'Objective-C'}, 
        { value: 'text/x-python', label: 'Python'}, 
        { value: 'text/x-rsrc', label: 'R'}, 
        { value: 'text/x-sh', label: 'Shell'}, 
        { value: 'text/x-sql', label: 'SQL'}, 
        { value: 'text/x-swift', label: 'Swift'}, 
        { value: 'text/x-vue', label: 'Vue'}, 
        { value: 'markdown', label: 'Markdown'}
      ],
      editor: null,
      code: '', // 编辑器绑定的值
		  // 默认配置
		  cmOptions: {
        mode: 'text/x-java',     //设置编译器编程语言关联内容
        theme: 'idea',      //编译器的主题，需要引入对应的包
        indentUnit: 2,          //一个块（编辑语言中的含义）应缩进多少个空格。默认值为2
        smartIndent: true,      //是否使用模式提供的上下文相关缩进（或者只是缩进与之前的行相同）。默认为true
        tabSize: 2,             //Tab缩进空格宽度 默认4格
        line: true,
        lineNumbers: true,      //是否显示行号 默认false
        autofocus: true,        //初始时是否自动获取焦点 默认false
        styleActiveLine: false, //设置光标选中行高亮 需引入工具包
        matchBrackets: false,
        scrollbarStyle: 'overlay', // 设置滚动条,默认为"null"为不显示的滚动条，可以使用提供的其他滚动条'simple' 'overlay' 需引入工具包 
        //自定义快捷键
        extraKeys: { 
          'Ctrl': 'autocomplete',
          'Alt-/': 'autocomplete'
        },
        // 自动提示
        hintOptions: {
          // hint: this.handleShowHint,
          completeSingle: false, // 当匹配只有一项的时候是否自动补全
        }
      },
      //  keyMap: 'vim'
    }
  },
  mounted() {
    this._initialize()
  },
  methods: {
    _initialize() {
       // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
      this.editor = CodeMirror.fromTextArea(this.$refs['cmEditor'], this.cmOptions)
      // 编辑器赋值
      this.editor.setValue(this.value || this.code)
      // 设置高度
      this.editor.setSize('100%', window.screen.availHeight - 300 + 'px')
      // 支持双向绑定
      this.editor.on('change', (editor) => {
        this.code = editor.getValue()
        if (this.$emit) {
          this.$emit('input', this.code)
        }
      })
      this.editor.on('inputRead', (editor) => {
        //调用显示提示
        const cur = editor.getCursor()
        const curLine = editor.getLine(cur.line)
        const lastChar = curLine.charAt(curLine.length -1)
        const reg = /^[.A-Za-z0-9\u4e00-\u9fa5]+$/
        if (reg.test(lastChar)) {
          editor.showHint()
        } else if (lastChar === '{')  {
          editor.replaceRange('}', cur)
        } 
      })
    },
    handleShowHint() {
      console.log('done')
    },
    changeMode(val) {
      console.log('change mode to : ', val)
      this.editor.setOption('mode', val)
    },
    getData() {
      //console.log(this.code)
      console.log('getData: ')
      console.log(this.editor.getValue())
    }
  }
}
</script>
<style>
.editor-box {
  overflow: auto;
  border-radius: 8px;
  /* background: #112435; */
}
.codeSql {
  font-size: 12pt;
  height: 100%;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
/* .CodeMirror {
  height: auto;
} */
</style>
